<template>
    <div class="greet animated fadeIn">
        <!-- <image class="head" src="../../static/images/heart-animation.gif"/> -->
        <scroll-view
            scroll-y
            class="box"
        >
            <div class="item" v-for="(item, index) in userList" :key="index">
                <image :src="item.headImg"/>
                <p>{{item.name}}</p>
            </div>
        </scroll-view>
        <p class="count">已收到{{userList.length}}位好友送来的祝福</p>
        <div class="bottom">
            <button class="left" lang="zh_CN" open-type="getUserInfo" @getuserinfo="sendGreet">送上祝福</button>
            <button class="right" @tap='money()'>红包赞赏</button>
        </div>
    </div>
</template>

<script>
import tools from 'common/js/h_tools'
export default {
  name: 'Greet',
  data () {
    return {
      userList: [],
      openId: '',
      userInfo: ''
    }
  },
  onShow () {
    // const that = this
    // that.getUserList()
  },
  created(){
      this.getBless()
  },
  methods: {
    sendGreet (e) {
      const that = this
      if (e.target.errMsg === 'getUserInfo:ok') {
        wx.getUserInfo({
          success: function (res) {
            that.userInfo = res.userInfo
            that.checkBless()
            // that.getOpenId()
          }
        })
      }
    },
    async getBless(){
        var res = await wx.cloud.callFunction({name: 'getBless'})
        console.log(JSON.parse(res.result).data)
        this.userList = JSON.parse(res.result).data
    },
    async checkBless(){
        var res = await wx.cloud.callFunction({name: 'getBlessByName',data: {headImg:this.userInfo.avatarUrl}})
        var ret = JSON.parse(res.result)
        if(ret.data.length!=0){
            wx.showToast({
                title: '您已经祝福过了哟~',
                icon: 'none',
                duration: 1000,
                mask: true
            })
        }else{
           this.blessing()
        }
    },
    async blessing(){
        var res = await wx.cloud.callFunction({name: 'blessing',data: {name:this.userInfo.nickName,headImg:this.userInfo.avatarUrl}})
        var ret = JSON.parse(res.result)
        if(ret.success){
            wx.showToast({
                title: '祝福成功!',
                icon: 'success',
                duration: 1000,
                mask: true
            })
            this.getBless()
        }else{
            wx.showToast({
                title: '您已经祝福过了哟~',
                icon: 'none',
                duration: 1000,
                mask: true
            })
        }
        // wx.showLoading({
        //     title: '加载中...',
        // })

        // setTimeout(function () {
        //     wx.hideLoading()
        // }, 2000)

        // wx.showToast({
        //     title: '这是一条没有icon的toast',
        //     icon: 'none',
        //     duration: 1000,
        //     mask: true
        // })
    },
    money(){
        wx.showActionSheet({
        itemList: ['俊的赞赏码(长按识别二维码)', '秋的赞赏码(长按识别二维码)'],
        success(res) {
            console.log(res.tapIndex)
            if(res.tapIndex==0){
                wx.previewImage({
                    current: 'http://dlhtx.zicp.vip:3000/wx/wxImg/jj.png', // 当前显示图片的http链接  
                    urls: ['http://dlhtx.zicp.vip:3000/wx/wxImg/jj.png'] // 需要预览的图片http链接列表  
                })
            }else{
                wx.previewImage({
                    current: 'http://dlhtx.zicp.vip:3000/wx/wxImg/qq.png', // 当前显示图片的http链接  
                    urls: ['http://dlhtx.zicp.vip:3000/wx/wxImg/qq.png'] // 需要预览的图片http链接列表  
                })
            }
        },
        fail(res) {
            console.log(res.errMsg)
        }
        })
    }

  }
}
</script>
<style lang="stylus" scoped>
.greet
    width 100%
    height 100%
    .head
        height 150rpx
        width 200rpx
        margin 0 auto
    .box
        height 840rpx
        width 690rpx
        margin-left 30rpx
        display flex
        justify-content flex-start
        align-items flex-start
        flex-wrap wrap
        border 1px solid #e3e3e3
        .item
            width 120rpx
            display flex
            flex-direction column
            justify-content flex-start
            align-items center
            padding 25rpx
            float left
            image
                width 100rpx
                height 100rpx
                border-radius 50rpx
            p
                height 50rpx
                line-height 50rpx
                font-size 24rpx
                color #444
                width 100rpx
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
                text-align center
    .bottom
        height 140rpx
        position fixed
        bottom 0
        left 0
        background rgba(255, 255, 255, 0.5)
        display flex
        justify-content center
        align-items center
        width 100%
        .left
            height 80rpx
            line-height 80rpx
            font-size 28rpx
            width 300rpx
            color #fff
            margin-right 20rpx
            border-radius 4rpx
            border none!important
            background linear-gradient(135deg, #fb5353, #ffc48e)
            transition all .3s
        .right
            height 80rpx
            line-height 80rpx
            font-size 28rpx
            color #fff
            width 300rpx
            border-radius 4rpx
            border none!important
            background linear-gradient(135deg, #6e79fb, #77e3c7);
    .count
        height 60rpx
        line-height 60rpx
        background rgba(255, 255, 255, 0.5)
        position fixed
        bottom 140rpx
        left 0
        font-size 28rpx
        color #444
        text-align center
        width 100%

    button::after{
        border none!important
    }
</style>
